<template>
  <div>
    <pre v-html="data"></pre>
    <el-row>
      <el-col :span="24">
        <el-form-item
          label="仓库类型"
          prop="type"
          label-width="150px"
          :rules="[
            { required: true, message: '请选择仓库类型', trigger: 'change' },
          ]"
        >
          <el-select
            v-model="$store.state.edit.row.type"
            placeholder="请选择仓库类型"
            clearable
            filterable
            size="mini"
            style="margin-left: '15px'"
            @change="fbaCodeSourceSelect"
          >
            <el-option
              v-for="(k, v) in stockTypeSource"
              :key="k"
              :label="stockTypeSource[v]"
              :value="Number(v)"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24">
        <el-form-item
          label="国家"
          prop="country"
          label-width="150px"
          :rules="[
            { required: true, message: '请选择国家', trigger: 'change' },
          ]"
        >
          <el-select
            v-model="$store.state.edit.row.country"
            placeholder="请选择国家"
            clearable
            filterable
            size="mini"
            style="margin-left: '15px'"
            @change="fbaCodeSourceSelect"
          >
            <el-option
              v-for="(k, v) in countrySource"
              :key="k"
              :label="countrySource[v]"
              :value="Number(v)"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24">
        <el-form-item
          label="省"
          prop="province"
          label-width="150px"
          :rules="[{ required: true, message: '请填写省', trigger: 'blur' }]"
        >
          <el-input
            v-model="$store.state.edit.row.province"
            placeholder="请输入省"
            clearable
            filterable
            size="mini"
            style="margin-left: '15px'"
          >
          </el-input>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24">
        <el-form-item
          label="城市"
          prop="city"
          label-width="150px"
          :rules="[{ required: true, message: '请填写城市', trigger: 'blur' }]"
        >
          <el-input
            prop="city"
            v-model="$store.state.edit.row.city"
            placeholder="请输入城市"
            clearable
            filterable
            size="mini"
            style="margin-left: '15px'"
          >
          </el-input>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24">
        <el-form-item
          label="主仓库代码"
          prop="masterFbaCodeId"
          label-width="150px"
          :rules="[
            { required: false, message: '请选择主仓库代码', trigger: 'change' },
          ]"
        >
          <el-select
            v-model="$store.state.edit.row.masterFbaCodeId"
            placeholder="请选择主仓库代码"
            clearable
            filterable
            size="mini"
            style="margin-left: '15px'"
          >
            <el-option
              v-for="(k, v) in fbaCodeSource"
              :key="k"
              :label="fbaCodeSource[v]"
              :value="Number(v)"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24" v-show="isShow">
        <el-form-item
          label="状态"
          prop="country"
          label-width="150px"
          :rules="[
            { required: true, message: '请选择状态', trigger: 'change' },
          ]"
        >
          <el-select
            v-model="$store.state.edit.row.status"
            placeholder="请选择状态"
            clearable
            filterable
            size="mini"
            style="margin-left: '15px'"
          >
            <el-option
              v-for="(k, v) in enableOrDisableSource"
              :key="k"
              :label="enableOrDisableSource[v]"
              :value="Number(v)"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { ajax } from "@/store/yg/common/utils";

export default {
  props: ["data"],
  data() {
    return {
       types: this.$store.state.edit.row.type, //仓库类型
       countrsys: this.$store.state.edit.row.country, //国家
      // province: this.$store.state.edit.row.province, //省
      // city: this.$store.state.edit.row.city, //城市
      // status: this.$store.state.edit.row.status, //状态
      // masterFbaCodeId: this.$store.state.edit.row.masterFbaCodeId, //主仓库ID
      stockTypeSource: this.$store.state.edit.entry.sources.stockTypeSource,
      countrySource: this.$store.state.edit.entry.sources.countrySource,
      enableOrDisableSource:
        this.$store.state.edit.entry.sources.enableOrDisableSource,
      fbaCodeSource: {},
      // rules: {
      //   type: [
      //     { required: true, message: "请选择仓库类型", trigger: "change" },
      //   ],
      //   country: [{ required: true, message: "请选择国家", trigger: "change" }],
      //   status: [{ required: true, message: "请选择状态", trigger: "change" }],
      //   province: [{ required: false, message: "请填写省", trigger: "blur" }],
      //   city: [{ required: false, message: "请填写城市", trigger: "blur" }],
      // },
      isShow: true,
    };
  },
  mounted() {
    //新增时候初始化时不请求后台数据
    //console.log("this.isShow",this.isShow)
    if (this.$store.state.edit.row.companyName) {
      //console.log("this.$store.state.edit.row.companyName",this.$store.state.edit.row.companyName);
      this.fbaCodeSourceSelect();
      this.isShow = true;
    } else {
      //新增时状态隐藏，默认启用
      this.isShow = false;
      this.$store.state.edit.row.status = 2;
    }
  },
  methods: {
    fbaCodeSourceSelect() {
      if (!this.$store.state.edit.row.country ||!this.$store.state.edit.row.type) {
        return;
      }

      //如果仓库类型不等于之前数据库的或者国家不等于之前数据库的
      if((this.types && this.types!=this.$store.state.edit.row.type) || (this.countrsys && this.countrsys!=this.$store.state.edit.row.country) ){
        this.$store.state.edit.row.masterFbaCodeId=null;//主仓库编码需要清空
      }

      var data = {};
      data["country"] = this.$store.state.edit.row.country;
      data["type"] = this.$store.state.edit.row.type;
      ajax("queryByCountryType", data).then(
        (res) => {
          if (res.code === 200) {
            this.fbaCodeSource = res.data;
          } else {
            if (res.message) {
              this.$message.error(res.message);
            } else {
              this.$message.error("请求异常");
            }
          }
        },
        (error) => {
          console.log(error);
        }
      );
    },
  },
};
</script>
<style scoped>
.el-input {
  width: 78% !important;
  margin-left: 15px;
}
.el-select {
  width: 78% !important;
  margin-left: 15px;
}
</style>
